<template>
  <div v-show="!!fieldConfig && !!fieldConfig.id" class="field-value-formula-groups">
    <a-button shape="round" @click="openFieldValueConfig" ghost type="primary">
      <span class="iconfont anticon" style="color: #40a9ff" v-show="hasFormulas">&#xe806;</span>
      计算公式
    </a-button>
    <a-button shape="round" ghost type="primary" @click="openFieldClearConfigModal">
      <span class="iconfont anticon" style="color: #40a9ff" v-show="hasClearFormulas">&#xe806;</span>
      控件清空设置
    </a-button>
<!--    <a-button shape="round" ghost type="primary">正则校验</a-button>-->

    <FieldValueConfig ref="FieldValueConfig" :field-config="fieldConfig" :form-definition="formDefinition"/>
    <FieldClearConfigModal ref="FieldClearConfigModal" :field-config="fieldConfig" :form-definition="formDefinition"/>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createField, createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import FieldValueConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FieldValueConfig.vue';
import FieldClearConfigModal
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FieldClearConfigModal.vue'

export default {
  name: 'FieldValueFormulaGroups',
  components: { FieldClearConfigModal, FieldValueConfig},
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    fieldConfig: createProps(Object, createField),
  },
  methods: {
    openFieldValueConfig() {
      let list = this.formDefinition.fieldValueFormulaGroups || [];
      this.formDefinition.fieldValueFormulaGroups = list;
      this.$refs.FieldValueConfig.setData(list.filter(item => item.fieldId === this.fieldConfig.id));
    },
    openFieldClearConfigModal() {
      let list = this.formDefinition.fieldClearFormulas || [];
      this.formDefinition.fieldClearFormulas = list;
      this.$refs.FieldClearConfigModal.setData(list.filter(item => item.fieldId === this.fieldConfig.id));
    }
  },
  computed: {
    hasFormulas() {
      if (this.formDefinition.fieldValueFormulaGroups.length === 0 || !this.fieldConfig || !this.fieldConfig.id) return false;
      let list = this.formDefinition.fieldValueFormulaGroups || [];
      list = list.filter(item => item.fieldId === this.fieldConfig.id);
      return list && list.length;
    },
    hasClearFormulas() {
      if (this.formDefinition.fieldClearFormulas && this.formDefinition.fieldClearFormulas.length === 0 || !this.fieldConfig || !this.fieldConfig.id) return false;
      let list = this.formDefinition.fieldClearFormulas || [];
      list = list.filter(item => item.fieldId === this.fieldConfig.id);
      return !!list && !!list.length;
    }
  }
};
</script>
<style>
.field-value-formula-groups > * {
  margin-bottom: 10px;
  width: 100%;
}

.field-value-formula-groups {

}
</style>